<template>
    <topNav></topNav>
    <div class="w-full">
        <card :hotDataInfo="resData"></card>
        <moveCardVue :hotDataInfo="commingData"></moveCardVue>
    </div>
    
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, ref} from 'vue'
import API from '../../utils/axios'
import card from '../../components/homeCard/card.vue'
import moveCardVue from '../../components/homeCard/moveCard.vue'
import topNav from '../../components/topNav/nav.vue'

export default defineComponent({
    name:"home",
    setup(){
        // 请求电影热门页数据来装数据
        const resData = ref([])
        const commingData = ref([])
        
        // 发送axios请求，去对接API拿数据
        const getHotData = async () => {
            let res = await API({
                url:'/api/movie/hot',
                method:'get'
            });
            // console.log(res)
            
            resData.value = res.data.data.playing
            commingData.value = res.data.data.comming
        }
        
        // 在东西挂载上去就去调用函数去拿数据
        onMounted(async ()=>{
            await getHotData()
        })
        return{
            resData,
            commingData,
            getHotData,
            topNav
            
        }
        
    },
     components:{ card,moveCardVue,topNav }
    // 注册组件
    
})


</script>